<template>
    <div class="select_class">
      <mt-search v-model="searchValue" style="height:auto;padding:0;">
      </mt-search>
      <mt-index-list>
        <mt-index-section class="section" v-for="site in siteData" :key=site :index="site">
          <div class="main" v-for="(item,index) in showData" @click="selectFun(item.regionId,item.areaNum,index)" v-if="item.sortName==site">
            <div class="classroom">
              <div class="className">{{item.localName}}</div>
            </div>
          </div>
        </mt-index-section>
      </mt-index-list>
    </div>
  
  </template>

<script>
    export default {
        data() {
            return {
                searchValue: '',
                serachData: [],
                showData: [],
                schoolList: [],
            }
        },
        methods: {
            selectFun(id, areaNum, index) {
                //如果要增加学校以外的选择功能,需要去g11传个参数,告诉这里是学校
                var AreaOptions = JSON.parse(sessionStorage.getItem('AreaOptions'));
                if (AreaOptions.typeId == 1) { //如果是选择服务学校
                    var url = '/regionSchool/regionSchoolList'
                    var params = {
                        regionId: id,
                    }
                    let list = [];
                    this.$api.post(url, params, (data) => {
                        this.schoolList = data.info;
                        console.log(JSON.stringify(data.info));
                        list = this.schoolList.map(e => {
                            e.radioName = e.schoolName
                            e.checked = false;
                            return e;
                        })
                        var options = {
                            title: '选择学校',
                            list: list,
                            multiple: false,
                        }
                        sessionStorage.setItem('radioOptions', JSON.stringify(options));
                        this.$router.push({
                            path: 'radio'
                        })
                    })
                } else if (AreaOptions.typeId == 2) { //如果是选择所在地区
                    var params = {
                        areaNum: areaNum
                    }
                    var url = '/school/getSchoolCode'
                    this.$api.post(url, params, data => {
                        var AreaBackOptions = {
                            schoolCode: data.info,
                            schoolArea: this.showData[index].localName
                        }
                        sessionStorage.setItem('AreaBackOptions', JSON.stringify(AreaBackOptions));
                        this.$router.push({
                            path: 'g11'
                        })
                    })
                }


            },
            getAreaData() { //获取省份数据
                let params = {
                    pageNum: 1,
                    pageSize: 1000,
                    regionGrade: 3,
                    pRegionId: sessionStorage.getItem('selectCity') //上个页面存储的省份ID
                }
                this.$api.post('/region/selectPage', params, data => {
                    this.serachData = this.showData = data.info.list.map(x => {
                        x.EnglishName = this.$getCase.query(x.localName);
                        return x
                    })
                }, function(data) {
                    console.log('data', data);
                })
            }
        },
        computed: {
            siteData: function() {
                var array = [];
                let AllZiMu = this.showData.map(x => { //从 showData里面提取以sortName为子对象的数组
                    return x.sortName
                })
                AllZiMu = AllZiMu.filter((element, index, self) => { //过滤相同子节点
                    return self.indexOf(element) === index;
                })
                return AllZiMu;
            }
        },
        created() {
            this.getAreaData();
        },
        watch: {
            searchValue(val) {
                this.showData = this.serachData.filter((element, index, self) => {
                    let needShow = false;
                    element.EnglishName.map(x => {
                        if (x.indexOf(val.toUpperCase()) != -1) { //遍历缩略首字母
                            needShow = true;
                        }
                    })
                    return element.localName.indexOf(val) != -1 || needShow //如果是全拼的也匹配成功
                })
            }
        }

    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>